<template>
  <div>
    <div class="match-performance-items">
      <div @click="clickPerformance(item)"
           v-for="(item,index) in performance"
           :key="index"
           class="performanceClass"
           :class="{ active:activePerformance === item}">
        {{item}}
      </div>
    </div>
    <TeamAttack v-show="activePerformance==='进攻'"/>
    <TeamDefense v-show="activePerformance==='防守'"/>
    <TeamOrganize v-show="activePerformance==='组织'"/>
  </div>
</template>

<script>
  import TeamAttack from "./attack/TeamAttack";
  import TeamDefense from "./defense/TeamDefense";
  import TeamOrganize from "./organize/TeamOrganize";
  export default {
    name: "TacticalPerformance",
    props:{
      playerId:{
        type:Number
      }
    },
    components:{
      TeamAttack,
      TeamDefense,
      TeamOrganize
    },
    data(){
      return {
        // activePane:'ThroughPass',
        activePerformance:'进攻',
        performance:['进攻','防守','组织']
      }
    },
    methods:{
      //点击 '组织','射门','防守','技术' 切换
      clickPerformance(item){
        this.activePerformance = item
      }
    }
  }
</script>

<style scoped>
  .match-performance-items {
    display: flex;
    justify-content: flex-start;
    width:  1440px;
    height: 56px;
    margin: 40px  auto  0;
    /*background-color: red;*/
  }
  .performanceClass {
    color: white;
    line-height: 56px;
    font-size: 30px;
    font-weight: bold;
    letter-spacing: 5px;
    text-align: center;
    width: 132px;
    height: 100%;
    background-color: #9E9E9E;
    border-radius: 10px 10px 0 0;
    margin-right: 3px;
  }
  .performanceClass:hover {
    color: #16C79A;
    background-color: #194568;
    cursor: pointer;
  }
  .active {
    color: #16C79A;
    background-color: #194568;
  }
</style>